<template>
	<view class="custom-course" style="height: 100vh;padding: 30px;background-color:rgb(34, 37, 45);background-image: radial-gradient(rgba(127, 133, 150, 0.4) 1px, transparent 0px);">
		<template v-if="customCourse.list.length">
			<view class="uv-flex-row" style="justify-content: space-between;padding: 0 0 30px;border-bottom: 1px solid #bbb;">
				<text style="color: #fff;font-size: 34px;font-weight: 700;">自定义课程</text>
				<uv-button text="+添加课程包"></uv-button>
			</view>
			<view class="uv-flex-row">
				<view class="item uv-flex-column" v-for="(item,index) in customCourse.list" :key="index">
					<view class="bg" :style="[{'background-image': `url(${item.logo})`}]">
						<uv-text :text="item.name" color="#fff"></uv-text>
						<view class="uv-flex-row" style="justify-content: space-between;">
							<uv-button text="编辑课程包信息" @click="edit(item)"></uv-button>
							<uv-button text="删除" type="error" @click="remove(item)"></uv-button>
							<uv-button text="编辑" @click="editPopupRef.open(item)"></uv-button>
						</view>
					</view>
					<view class="info">
						<uv-text :text="`星球数量：${item.categoryCount}`" color="#fff"></uv-text>
						<uv-text :text="`课程数量：${item.courseCount}`" color="#fff"></uv-text>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<uv-text text="您还没有自定义课程包，快去新建试试吧！" color="#fff" size="30px"></uv-text>
			<uv-button text="新建课程包" @click="add"></uv-button>
		</template>
		<base-info :type="customCourse.type" :detail="customCourse.detail" v-if="customCourse.showBaseInfo" @cancel="customCourse.showBaseInfo=false" @change="init()" />
		<edit-popup ref="editPopupRef" />
	</view>
</template>
<script setup>
	import { computed, defineComponent, reactive, ref, watch } from 'vue';
	import { userCustomChapterList } from '@/common/api/list.js';
	import { customChapterRemove } from '@/common/api/course.js'
	import baseInfo from './components/base-info.vue';
	import editPopup from './components/edit-popup.vue';
	defineComponent({ baseInfo, editPopup })
	const editPopupRef = ref(null);
	const customCourse = reactive({
		list: [],
		showBaseInfo: false,
		type: 'create',
		detail: {}
	});
	const character = computed(() => {
		return getApp().globalData.dzcharacter?.character;
	})
	const myCharacterId = computed(() => {
		return getApp().globalData.dzcharacter?.character?.characterId;
	})
	async function init() {
		if (character.value?.type != 'TEACHER') return uni.$uv.route({
			url: '/pages/chapter/chapter',
			type: 'redirect'
		})
		const { data } = await userCustomChapterList({
			characterId: character.value.characterId
		})
		customCourse.list = data;
		customCourse.showBaseInfo = false;
	}

	function add() {
		customCourse.type = 'create';
		customCourse.showBaseInfo = true;
	}

	function edit(item) {
		customCourse.type = 'edit';
		customCourse.detail = item;
		customCourse.showBaseInfo = true;
	}

	function remove(item) {
		uni.showModal({
			title: `确认要删除“${item.name}”吗？`,
			content: `删除后该课程包及其下的课程将都无法恢复`,
			success: async (res) => {
				if (res.confirm) {
					await customChapterRemove({
						characterId: myCharacterId.value,
						uid: uniCloud.getCurrentUserInfo().uid,
						chapter: item.chapter
					})
					const findIndex = customCourse.list.findIndex(o => o.chapter == item.chapter);
					if (findIndex > -1) {
						customCourse.list.splice(findIndex, 1);
					}
				}
			}
		})
	}
	init();
</script>
<style scoped lang="scss">
	.item {
		border-radius: 12px;
		border: 1px solid rgba(127, 133, 150, 0.3);
		width: 263px;
		height: 252px;
		overflow: hidden;
		margin-right: 20px;
		margin-bottom: 24px;
		cursor: pointer;
		position: relative;
		.bg {
			flex: 1;
			background-size: cover;
			background-repeat: no-repeat;
		}
		.info {
			height: 60px;
		}
	}
</style>